<template>
  <div>
    <el-main>
      <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="supplierCode" placeholder="请输入供应商编码" @keyup.enter.native="selectBySupplierCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="selectBySupplierCode">查询</el-button>
          <el-button icon="el-icon-refresh-right" @click="reStart">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="OpenWindown">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="SupplerList" :height="tableHeight" border stripe style="width: 100%; margin-bottom: 10px">
        <el-table-column prop="code" label="供应商编码" width="100" align="center"></el-table-column>
        <el-table-column prop="supplierName" label="供应商"></el-table-column>
        <el-table-column prop="linkMan" label="联系人"></el-table-column>
        <el-table-column prop="tel" label="电话"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="bankAccount" label="银行卡号"></el-table-column>
        <el-table-column label="操作" align="center" width="290">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" size="small" @click="Hedit(scope.row)">编辑</el-button>
            <el-button icon="el-icon-delete" type="danger" size="small" @click="Hdelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageNo" :page-sizes="[5, 6,7, 8, 9]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

    </el-main>

    <!-- 添加和修改角色窗口 -->
    <system-dialog :title="windownDialog.title" :visible="windownDialog.visible"
     :width="windownDialog.width":height="windownDialog.height" @onClose="onClose" @onConfirm="onConfirm">
       <div slot="content">
         <el-form :model="Supplier" ref="SupplierForm" :rules="rules" label-width="80px" :inline="false" size="small">
           <el-form-item label="供应商家" prop="supplierName"><el-input v-model="Supplier.supplierName">?</el-input></el-form-item>
           <el-form-item label="地址" prop="address"><el-input v-model="Supplier.address"></el-input></el-form-item>
           <el-form-item label="联系人" prop="linkMan"><el-input v-model="Supplier.linkMan"></el-input></el-form-item>
           <el-form-item label="电话" prop="tel"><el-input v-model="Supplier.tel"></el-input></el-form-item>
           <el-form-item label="银行卡号" prop="bankAccount"><el-input v-model="Supplier.bankAccount"></el-input></el-form-item>
         </el-form>
       </div>
    </system-dialog>


  </div>
</template>

<script>
  import Sapi from "@/api/supplier"
  import SystemDialog from '@/components/system/SystemDialog.vue'

  export default{
    name:'providerList',
    components:{SystemDialog},
    data(){
      return{
        total:0,
        pageNo:1,
        pageSize:5,

        tableHeight: 0,
        supplierCode:'',

        SupplerList:[],

        windownDialog:{
          title:'',
          visible:false,
          width:600,
          height:300,
        },

        Supplier:{
          id:'',
          code:'',
          supplierName:'',
          linkMan:'',
          tel:'',
          address:'',
          bankAccount:''
        },


        rules: {
          tel:[{
            required: true,
            trigger: 'blur',
            message: '请输入联系电话'
          }],
          bankAccount:[{
            required: true,
            trigger: 'blur',
            message: '请输入银行卡号'
          }],
          supplierName:[{
            required: true,
            trigger: 'blur',
            message: '请输入供应商名'
          }],
          address:[{
            required: true,
            trigger: 'blur',
            message: '请输入地址'
          }],
          linkMan:[{
            required:true,
            trigger:'blue',
            message:'请输入联系人'
          }]
        },

        searchModel:{
          code:'',
          supplierName:'',
          linkMan:'',
          tel:'',
          address:'',
          bankAccount:'',
          pageNo: 1,
          pageSize: 5,
        }
      }
    },

    created() {
      this.search()

    },

    methods:{
      //切换一页数据条数
      handleSizeChange(size){
        this.pageSize = size
        this.search()

      },
      //改变页数
      handleCurrentChange(page){
        this.pageNo = page
        this.search()
      },

      //打开新增窗口
      OpenWindown(){
        this.$resetForm("roleForm", this.Supplier);
        this.windownDialog.title = '新增',
        this.windownDialog.visible = true
      },


      //发送查询请求
      async search(){
        this.searchModel.pageNo = this.pageNo;
        this.searchModel.pageSize = this.pageSize;
        let res = await Sapi.getSupplierList(this.searchModel)
        if(res.success){
          this.SupplerList = res.data.records
          this.total = res.data.total
        }
      },


      //打开编辑窗口
      Hedit(row){
        this.$objCopy(row, this.Supplier),
        this.windownDialog.title = '修改',
        this.windownDialog.visible = true
      },


      //删除
      async Hdelete(row){
        let confirm = await this.$myconfirm('确定要删除该数据吗?')
        if(confirm){
          let res = await Sapi.DelSupplier(row.id)

          if(res.success){
            this.$message.success(res.message)
            this.search()
          }else{
            this.$message.error(res.message)
          }
        }

      },

      //重置
      reStart(){
        this.supplierCode = ""
        this.search()
      },

      //单个查询
      async selectBySupplierCode(){
        if(this.supplierCode != ''){
          let res = await Sapi.selectByCode(this.supplierCode)
          if(res.success){
            this.SupplerList = res.data
            }
        }else{
          this.$message.error("查找内容不为空")
        }

      },

      //窗口取消
      onClose(){
        this.windownDialog.visible = false
      },
      //窗口确认
      onConfirm(){
        this.$refs.SupplierForm.validate(async (valid) => {
          if (valid) {
            let res = null;
            if (this.Supplier.id === "") {
              res = await Sapi.AddSupplier(this.Supplier)
            }else{
              res = await Sapi.EditSupplier(this.Supplier)
            }


            if(res.success){
              this.$message.success(res.message);
              this.search()
              this.windownDialog.visible = false;
            }else{
              this.$message.error(res.message)
            }
          }
        })
      },


    },


    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 220
      })
    }
  }

</script>

<style>
</style>
